.instruction {
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
position: absolute;
background: black;
z-index: 5;
opacity: 0.8;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
color: #FFF;
font-size: x-large;
font-family: 'Open Sans', sans-serif;
}
.instr {
 margin: 0 auto;
 line-height: 30px;
}
.clear {
  width: 100%;
}
.buttons {
  margin-top: 10px;
}
.button {
  margin: 0 20px;
}
.button:hover {
  text-decoration: underline;
  cursor: pointer;
}
.instr_text {
  text-align: center;
}
.instruction_circle {
width: 100px; 
height: 100px;
background: #fff;
border-radius: 50%;
position: absolute;
z-index: 5;
}

/*
.instruction_circle.two  {
    animation: gotoback cubic-bezier(.17,.84,.44,1) 4s, gotologotwo cubic-bezier(.17,.84,.44,1) 4s, gotomenu cubic-bezier(.17,.84,.44,1) 4s, gotoshare cubic-bezier(.17,.84,.44,1) 4s;
  animation-delay: 0s, 4s, 8s, 12s;
}*/

@media (min-width: 100px) {
  .instruction_circle.one  {
    animation: gotoback cubic-bezier(.17,.84,.44,1) 4s, gotologoone cubic-bezier(.17,.84,.44,1) 4s, gotomenu cubic-bezier(.17,.84,.44,1) 4s, gotoshare cubic-bezier(.17,.84,.44,1) 4s;
  animation-delay: 0s, 4s, 8s, 12s;
}
}

@media (min-width: 992px) {
  .instruction_circle.one  {
    animation: gotoforward cubic-bezier(.17,.84,.44,1) 4s, gotologoone cubic-bezier(.17,.84,.44,1) 4s, gotomenu cubic-bezier(.17,.84,.44,1) 4s, gotoshare cubic-bezier(.17,.84,.44,1) 4s;
  animation-delay: 0s, 4s, 8s, 12s;
}
}

@keyframes gotoforward {
  from {
top: calc(100%/2 - 50px);
right: 50%;
  }

  65% {
width: calc(12px + 1rem * 5 + 20px + 1.25rem * 6 + 12px + 20px);
height: 55px;
border-radius: .3rem;
top: calc(100vh - 98px - 60px - 3px + 20px);
right: calc(50% - ((12px + 1rem * 5 + 20px + 1.25rem * 6 + 12px + 20px)/2) + 10px);
  }

  to {
width: calc(12px + 1rem * 5 + 20px + 1.25rem * 6 + 12px + 20px);
height: 55px;
border-radius: .3rem;
top: calc(100vh - 98px - 60px - 3px + 20px);
right: calc(50% - ((12px + 1rem * 5 + 20px + 1.25rem * 6 + 12px + 20px)/2) + 10px);
  }
}

@keyframes gotoback {
  from {
top: calc(100%/2 - 50px);
right: 50%;
  }

  65% {
width: calc(12px + 1rem * 5 + 20px + 1.25rem * 6 + 12px + 20px);
height: 55px;
border-radius: .3rem;
top: calc(100vh - 98px - 60px + max(6vw,55px) - 8px + 20px);
right: calc(50% - ((12px + 1rem * 5 + 20px + 1.25rem * 6 + 12px + 20px)/2) + 10px);
  }

  to {
width: calc(12px + 1rem * 5 + 20px + 1.25rem * 6 + 12px + 20px);
height: 55px;
border-radius: .3rem;
top: calc(100vh - 98px - 60px + max(6vw,55px) - 8px + 20px);
right: calc(50% - ((12px + 1rem * 5 + 20px + 1.25rem * 6 + 12px + 20px)/2) + 10px);
  }
}

@keyframes gotologoone {
  from {
width: 145px;
height: 55px;
border-radius: .3rem;
top: calc(100vh - 98px - 40px - 3px );
right: calc(50% - 107px);
  }

    65% {
width: 7vw;
height: 4vw;
min-width: 60px;
min-height: 40px;
border-radius: .3rem;
top: 7px;
right: calc(100% - max(60px, 7vw) - 1vw - 5px);
  }

  to {
width: 7vw;
height: 4vw;
min-width: 60px;
min-height: 40px;
border-radius: .3rem;
top: 7px;
right: calc(100% - max(60px, 7vw) - 1vw - 5px);
  }
}


/*


@keyframes gotologotwo {
  from {
width: 75px;
height: 45px;
border-radius: .3rem;
top: calc(100vh - 98px - 38px );
right: calc(50% + 48px);
  }


    65% {
width: 7vw;
height: 4vw;
min-width: 60px;
min-height: 40px;
border-radius: .3rem;
top: 7px;
right: calc(100% - max(60px, 7vw) - 1vw - 5px);
  }

  to {
width: 7vw;
height: 4vw;
min-width: 60px;
min-height: 40px;
border-radius: .3rem;
top: 7px;
right: calc(100% - max(60px, 7vw) - 1vw - 5px);
  }
}
*/

@keyframes gotomenu {
  from {
width: 7vw;
height: 4vw;
min-width: 60px;
min-height: 40px;
border-radius: .3rem;
top: 7px;
right: calc(100% - max(60px, 7vw) - 1vw - 5px);
  }


    65% {
width: 60px;
height: 50px;
border-radius: .3rem;
top: 0;
right: 0;
  }


  to {
width: 60px;
height: 50px;
border-radius: .3rem;
top: 0;
right: 0;
  }
}

@keyframes gotoshare {
  from {
width: 60px;
height: 50px;
border-radius: .3rem;
top: 0;
right: 0;
  }

      65% {
width: 70px;
height: 70px;
border-radius: 50%;
top: calc(100% - 108px);
right: -1px;
  }

  to {
width: 70px;
height: 70px;
border-radius: 50%;
top: calc(100% - 108px);
right: -1px;
  }
}

.instr{
  opacity: 0;
}

.text1 {
  animation: 4s anim-lineUp cubic-bezier(.17,.84,.44,1)  0s;
}
.text2 {
  animation: 4s anim-lineUp cubic-bezier(.17,.84,.44,1)  4s;
}
.text3 {
  animation: 4s anim-lineUp cubic-bezier(.17,.84,.44,1)  8s;
}
.text4 {
  animation: 4s anim-lineUp cubic-bezier(.17,.84,.44,1)  12s;
}
@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  35% {
    opacity: 1;
    transform: translateY(0%);
  }
  65% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
.instruction {
    animation: hideAnimation 0s ease-in 16s;
  animation-fill-mode: forwards;
}
@keyframes hideAnimation  {
  to {
    visibility: hidden;
    width: 0;
    height: 0;
  }
}